<template>
	<div class="mp-view_right">
		<div class="mp_right-p1">
			<i class="icon-5333-diqiu right-p1_icon"></i>
			<div class="right-p1_t2">{{viewModel.name}}</div>
			<div class="right-p1_t3">{{viewModel.intro}}</div>
		</div>
		<!-- <div class="mp_right-p2">
      <div class="mp_right-p2_t">
        <span>选择风格</span>
        <span class="p2_t-span2">选择App、小程序、H5等终端使用的风格</span>
      </div>
      <ul class="mp_right-p2_ul">
        <li class="mp_right-p2_li" v-for="(item,index) in 20" :key="index">风格{{index}}</li>
      </ul>
    </div> -->
		<div class="mp_right-p3">
			<div class="mp_right-p3_txt">前台网址</div>
			<pre class="mp_right-p3_pre" v-if="viewModel.links">{{viewModel.links[0].url}}</pre>
		</div>
	</div>
</template>
<script>
	export default {
		props: {
			viewModel: {}
		}
	}
</script>
<style lang="scss">
	.mp-view_right {
		flex: 1;
		min-width: 0;

		.mp_right-p1 {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #e5e5e5;
			padding: 10px 0;

			.right-p1_t1 {
				width: 40px;
				height: 40px;
			}

			.right-p1_icon {
				font-size: 20px;
				padding-right: 10px;
				margin-top: 2px;
			}

			.right-p1_t2 {
				font-size: 22px;
				font-weight: 700;
			}

			.right-p1_t3 {
				font-size: 12px;
				color: #999;
				flex: 1;
				min-width: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				padding-left: 40px;
			}
		}

		.mp_right-p2 {
			padding: 20px 0;
			border-bottom: 1px solid #e5e5e5;

			.mp_right-p2_t {
				span {
					font-size: 14px;
				}

				.p2_t-span2 {
					margin-left: 20px;
					color: #999;
				}
			}

			.mp_right-p2_ul {
				display: flex;
				flex-wrap: wrap;
				padding: 10px 0;

				.mp_right-p2_li {
					padding: 5px 10px;
					cursor: pointer;
					font-size: 14px;
					border: 1px solid #e5e5e5;
					margin: 5px;

					&:hover {
						border: 1px solid #1fd279;
						color: #1fd279;
					}
				}
			}
		}

		.mp_right-p3 {
			border-bottom: 1px solid #e5e5e5;
			padding: 20px 0;

			.mp_right-p3_txt {
				font-size: 14px;
				font-weight: 600;
			}

			.mp_right-p3_pre {
				font-size: 16px;

			}
		}
	}
</style>